<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Size - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">size</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">CSS2</i></b>] [<b><i class="fs">O4</i></b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Printing Properties</b><br></td>
</tr>
<tr>
    <td valign=top><a href="pbbefore.htm">page-break-before</a><br>
    <a href="pbinside.htm">page-break-inside</a><br>
    <a href="pbafter.htm">page-break-after</a><br>
    <a href="page.htm">page</a><br></td>
    <td valign=top><a href="marks.htm">marks</a><br>
    <a href="widows.htm">widows</a><br>
    <a href="orphans.htm">orphans</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">auto</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>Page context</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>NA</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual, Paged</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>NA</td></tr>
<tr><th align=left><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS2/page.html#page-size-prop">CSS2: Sect. 13.2.2</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>This property describes the orientation or dimensions of the page box.
        The 'size' property classifies a page box so that it is either 'relative' or
        'absolute'. 'Absolute' page boxes have a fixed size, whereas 'relative' page
        boxes will be scaled to fit the target paged media. In the case where a page
        box is smaller than the intended 'size', CSS2 recommends that it be centered
        on the page to allow for better alignment of multiple pages.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">auto</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>] [<b><i class="fs">O4</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        This value defines a 'relative' page box, setting the values to the size and
        orientation of the target page.</dd>

<dt><b class="subheading">portrait</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        This value defines a 'relative' page box, overriding the target page's
        current default content orientation, using the typical paradigm where content flows
        from left to right across the short dimension, and flowing down along the long
        dimension.</dd>

<dt><b class="subheading">landscape</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        This value defines a 'relative' page box, overriding the target page's
        current default content orientation, using the landscape method, where content
        flows from left to right across the long dimension, and flowing down along the short
        dimension. This method is often used when a given line will contain larger amounts of
        content than normal.</dd>

<dt><b class="subheading">[length]</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>] [<b><i class="fs">O4</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Giving length values for this property creates a page box with fixed dimensions, eg:
        an 'absolute' page box. Setting only one length value with this value creates a
        square page box of equal height and width. If two values are specified, the first
        value represents the page width, and the second represents the page height.</dd>
</dl>

<big><b class="mainheading">Syntax</b></big>
<dl>
    <dd><b class="selector">selector</b> {
        <span class="property">size:</span> [length]{1,2} | auto | portrait | landscape | inherit }
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">body</b> {
        <span class="property">size:</span> 8.5in 11in }</div>
    <dd><div class="example">In-Line: &lt;<b class="tagname">body</b>
        <span class="tagattrib">STYLE</span>=&quot;<span class="property">size:</span>
        8.5in 11in&quot;&gt;test text in the paragraph&lt;/<b class="tagname">body</b>&gt;</div>
</dl>

<big><b class="mainheading">Notes</b></big>
<ul>
    <li>CSS2 notes that for page boxes that do not fit target page dimensions, a browser
        should attempt to:<br>
        - "Rotate the page box 90 degrees if this will make the page box fit."<br>
        - "Scale the page to fit the target."<br>
        CSS2 also states that the user <em>should</em> be consulted before making these changes.
    <li>Before its inclusion in CSS2, this property was first proposed in the W3C
        Working Draft "CSS Printing Extensions" (6/26/97,
        <a href="http://www.w3.org/TR/WD-print">http://www.w3.org/TR/WD-print</a>)
    <li>This property has been removed in CSS2.1.
</ul>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li>Nothing to report.
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>